<template>
  <div class="app-container">
    <el-card class="box-card" v-loading="loading">
      <div slot="header" class="clearfix">
        <span>供应商详情</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="goBack">返回</el-button>
      </div>

      <el-descriptions :column="2" border v-if="supplierInfo && Object.keys(supplierInfo).length > 0">
        <el-descriptions-item label="供应商编码">{{ supplierInfo.supplierCode || '--' }}</el-descriptions-item>
        <el-descriptions-item label="供应商名称">{{ supplierInfo.supplierName || '--' }}</el-descriptions-item>
        <el-descriptions-item label="联系人">{{ supplierInfo.contactPerson || '--' }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ supplierInfo.contactPhone || '--' }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ supplierInfo.email || '--' }}</el-descriptions-item>
        <el-descriptions-item label="地址">{{ supplierInfo.address || '--' }}</el-descriptions-item>
        <el-descriptions-item label="等级">
          <el-tag :type="getLevelTagType(supplierInfo.level)">{{ getLevelText(supplierInfo.level) }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="supplierInfo.status === 1 ? 'success' : 'danger'">
            {{ supplierInfo.status === 1 ? '启用' : '停用' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="备注">{{ supplierInfo.remark || '--' }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">
          <span v-if="supplierInfo.createTime">{{ parseTime(supplierInfo.createTime) }}</span>
          <span v-else>--</span>
        </el-descriptions-item>
      </el-descriptions>

      <!-- 评分信息 -->
      <el-card body-style="height: 4700px" class="score-card" shadow="never" v-if="supplierInfo && Object.keys(supplierInfo).length > 0">
        <div slot="header" class="clearfix">
          <span>供应商评分</span>
        </div>
        <el-row :gutter="20" class="score-row">
          <el-col :xs="24" :sm="12" :md="6">
            <div class="score-item">
              <div class="score-title">质量评分</div>
              <el-rate
                v-model="supplierInfo.qualityScore"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}分"
                :max="10"
                :allow-half="true"
                :colors="rateColors"
              />
            </div>
          </el-col>
          <el-col :xs="24" :sm="12" :md="6">
            <div class="score-item">
              <div class="score-title">交付评分</div>
              <el-rate
                v-model="supplierInfo.deliveryScore"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}分"
                :max="10"
                :allow-half="true"
                :colors="rateColors"
              />
            </div>
          </el-col>
          <el-col :xs="24" :sm="12" :md="6">
            <div class="score-item">
              <div class="score-title">价格评分</div>
              <el-rate
                v-model="supplierInfo.priceScore"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}分"
                :max="10"
                :allow-half="true"
                :colors="rateColors"
              />
            </div>
          </el-col>
          <el-col :xs="24" :sm="12" :md="6">
            <div class="score-item">
              <div class="score-title">服务评分</div>
              <el-rate
                v-model="supplierInfo.serviceScore"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}分"
                :max="10"
                :allow-half="true"
                :colors="rateColors"
              />
            </div>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="24">
            <div class="score-item total-score">
              <div class="score-title">综合评分</div>
              <el-rate
                v-model="supplierInfo.totalScore"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}分"
                :max="10"
                :allow-half="true"
                :colors="rateColors"
              />
            </div>
          </el-col>
        </el-row>
      </el-card>
    </el-card>

    <!-- 选项卡 -->
    <el-card class="box-card" style="margin-top: 20px;" v-if="supplierId">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="评价记录" name="evaluations">
          <!-- 不在选项卡内直接嵌套组件，而是使用v-if条件渲染 -->
        </el-tab-pane>
        <el-tab-pane label="合作关系" name="cooperations">
          <!-- 不在选项卡内直接嵌套组件，而是使用v-if条件渲染 -->
        </el-tab-pane>
      </el-tabs>

      <!-- 在选项卡外部使用v-if条件渲染组件 -->
      <evaluation-list v-if="activeTab === 'evaluations'" :supplier-id="supplierId" />
      <cooperation-list v-if="activeTab === 'cooperations'" :supplier-id="supplierId" />
    </el-card>
  </div>
</template>

<script>
import { getSupplier } from '@/api/supplier';
import EvaluationList from '@/components/EvaluationList.vue';
import CooperationList from '@/components/CooperationList.vue';

export default {
  name: 'SupplierDetail',
  components: {
    EvaluationList,
    CooperationList
  },
  data() {
    return {
      loading: true,
      supplierId: null,
      supplierInfo: {
        status: 1,
        qualityScore: 0,
        deliveryScore: 0,
        priceScore: 0,
        serviceScore: 0,
        totalScore: 0
      },
      activeTab: 'evaluations',
      rateColors: ['#F56C6C', '#E6A23C', '#67C23A']
    };
  },
  created() {
    const id = this.$route.params.id;

    this.supplierId = id ? parseInt(id) : null;

    if (this.supplierId) {
      this.getSupplierDetail();
    } else {
      this.loading = false;
      this.$message.error('供应商ID无效');
    }
  },
  methods: {
    getSupplierDetail() {
      this.loading = true;
      getSupplier(this.supplierId).then(res => {
        if (res.code === 200) {
          this.supplierInfo = res.data;
        } else {
          this.$message.error('获取供应商详情失败');
        }
        this.loading = false;
      }).catch(error => {
        console.error('获取供应商详情失败', error);
        this.$message.error('获取供应商详情失败');
        this.loading = false;
      });
    },
    goBack() {
      this.$router.push('/supplier');
    },
    getLevelTagType(level) {
      switch (level) {
        case 'S': return 'success';
        case 'A': return 'primary';
        case 'B': return 'info';
        case 'C': return 'warning';
        case 'D': return 'danger';
        default: return '';
      }
    },
    getLevelText(level) {
      switch (level) {
        case 'S': return 'S级(战略)';
        case 'A': return 'A级(优质)';
        case 'B': return 'B级(良好)';
        case 'C': return 'C级(一般)';
        case 'D': return 'D级(待观察)';
        default: return level || '--';
      }
    }
  }
}
</script>

<style scoped>
.score-card {
  margin-top: 20px;
  border-top: 1px solid #EBEEF5;
}

.score-row {
  display: flex;
  flex-wrap: wrap;
}

.score-item {
  margin-bottom: 20px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.score-title {
  margin-bottom: 10px;
  font-weight: bold;
}

.total-score {
  margin-top: 0;
  padding-top: 10px;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .score-row .el-col {
    margin-bottom: 15px;
  }
}
</style>
